<template>
  <div class="groupEntry">
    <el-card class="box-card" style="margin: 10px 0">
      <div class="text item">
        <h4>订单详情</h4><br>
        用户名：{{username}}<br><br>
        选择套餐：{{taocan_name.name}}
      </div>
    </el-card>
    <el-row style="margin-bottom: 10px" >
      <el-button type="primary" plain @click="btn_top">上一步</el-button>
      <el-button type="primary" @click="btn_next" :loading="loading">完 成</el-button>
    </el-row>
  </div>
</template>

<script>
import qs from 'qs'
import {mapState} from 'vuex'
import {addOrder} from "../../utils/api";
export default {
  name: "GroupEntry",
  data(){
    return {
      loading:false,
    }
  },
  methods:{
    btn_top(){
      this.$emit('active_event',2,1)
    },
    btn_next(){
      this.loading=true;
      if(this.username===""){
        this.$message({
          message: '用户名为空哦，请重新登录之后再尝试',
          type: 'warning'
        });
        this.$store.commit('setDlzt');
        this.$router.push('/login');
        this.loading=false;
      }else{
        addOrder(
            qs.stringify({
              pid:this.taocan_name.id
            })
        ).then(respose=>{
          if(respose.status===200){
            this.$message({
              message: '开通成功',
              type: 'success'
            });
            this.loading=false;
            this.$router.push({path:'/user/userorder',query:{tip:'y'}});
          }else if(respose.status===139){
            this.$message.error('余额不足');
            this.loading=false;
            /*防止高频提交 前往用户充值页面*/
            this.$router.replace('user/pay')
          }else if(respose.status===142){
            this.$message.warning('您还有未处理的订单');
            this.loading=false;
            this.$router.push('/user/userorder');
          }
        }).catch(error=>{
          console.log(error);
        })
      }
    },
  },
  props:{
    taocan_name:Object,
    taocan_price:String
  },
  computed:{
    ...mapState([
        "username"
    ])
  }

}
</script>

<style scoped>
.groupEntry{
  margin-top: 10px;
}
</style>
